<template>
  <div id="ath">
    <div class="index-wrapper" :id="isPC ? 'pc' : 'mobile'">
      <header-bar></header-bar>
      <div class="content">
        <div class="content-box">
          <h1>尊敬的企业用户，请认证手机号</h1>
          <a-form :form="form" @submit="handleSubmit">
            <a-form-item label="手机号" v-bind="formItemLayout">
              <a-input
                size="large"
                placeholder="请输入手机号"
                disabled
                v-decorator="[
                  'mobile',
                  {
                    initialValue: mobile,
                    rules: [
                      {
                        required: true,
                        message: '请输入手机号'
                      }
                    ]
                  }
                ]"
                style="width: 100%"
              >
              </a-input>
            </a-form-item>
            <a-form-item label="验证码" v-bind="formItemLayout">
              <a-row :gutter="8">
                <a-col :span="14">
                  <a-input
                    size="large"
                    autocomplete="off"
                    v-decorator="[
                      'code',
                      {
                        initialValue: '',
                        rules: [
                          {
                            required: true,
                            message: '请输入验证码'
                          }
                        ]
                      }
                    ]"
                  />
                </a-col>
                <a-col :span="10">
                  <a-button
                    size="large"
                    block
                    @click="getCode"
                    class="code-btn"
                    v-if="!isShowTimer"
                    >获取验证码</a-button
                  >
                  <span v-else class="count-wrapper">{{ count }}s</span>
                </a-col>
              </a-row>
            </a-form-item>
            <a-form-item>
              <a-checkbox
                size="large"
                style="font-size: 0.88rem; line-height: 1.3rem"
                v-decorator="[
                  'agreement',
                  { initialValue: true, valuePropName: 'checked' }
                ]"
              >
                我已同意
                <a
                  href="javaScript:(0)"
                  @click="agreement('user', '用户注册服务协议')"
                >
                  《用户注册服务协议》
                </a>
                <a
                  href="javaScript:(0)"
                  @click="agreement('service', '投资人服务协议')"
                >
                  《投资人服务协议》
                </a>
                <a
                  href="javaScript:(0)"
                  @click="agreement('tzfx', '投资风险提示书')"
                >
                  《投资风险提示书》
                </a>
                <a
                  href="javaScript:(0)"
                  @click="agreement('dzxy', '电子签名授权协议')"
                >
                  《电子签名授权协议》
                </a>
                <a
                  href="javaScript:(0)"
                  @click="agreement('wtkj', '委托快捷签署协议')"
                >
                  《委托快捷签署协议》
                </a>
              </a-checkbox>
            </a-form-item>
            <a-form-item style="text-align: center">
              <a-button
                size="large"
                type="primary"
                html-type="submit"
                class="submit-btn"
              >
                确认提交 </a-button
              ><br />
              <span class="text-orange">如需帮助，请联系：400-605-9006</span>
            </a-form-item>
          </a-form>
        </div>
      </div>
      <footer-bar class="footer" v-if="isPC"></footer-bar>
    </div>
    <a-modal
      width="80%"
      height="80%"
      :title="title"
      :visible="visible"
      onOk="handleOk"
      @cancel="handleOk"
    >
      <agreement :type="type"></agreement>
      <template slot="footer">
        <a-button key="submit" type="primary" @click="handleOk">
          关闭
        </a-button>
      </template>
    </a-modal>
  </div>
</template>

<script>
import { Checkbox, Row, Col } from "ant-design-vue";
export default {
  components: {
    aCheckbox: Checkbox,
    aRow: Row,
    aCol: Col,
    headerBar: () => import("@/components/commonHeader/index"),
    footerBar: () => import("@/components/commonFooter/index"),
    agreement: () => import("@/components/commonAgreement/index")
  },
  data() {
    return {
      visible: false,
      confirmDirty: false,
      type: "",
      title: "",
      timer: null,
      isShowTimer: false,
      count: 60,
      formItemLayout: {
        labelCol: {
          xs: { span: 24 },
          sm: { span: 4 }
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 20 }
        }
      }
    };
  },
  beforeCreate() {
    this.form = this.$form.createForm(this);
  },
  methods: {
    agreement(type, title) {
      this.title = title;
      this.type = type;
      this.visible = true;
    },
    handleOk() {
      this.visible = false;
    },
    handleSubmit(e) {
      e.preventDefault();
      this.form.validateFieldsAndScroll((err, values) => {
        if (!err) {
          if (!values.agreement) {
            this.$message.success("尚未同意协议!");
            return false;
          }
          let obj = JSON.parse(JSON.stringify(values));
          delete obj.agreement;
          this.$ajax
            .post(this.$api.bindMobile, obj)
            .then(() => {
              this.$router.push({ name: "companyInfo" });
              this.$message.success("认证成功");
            })
            .catch(err => {
              this.$message.error(err);
            });
        }
      });
    },
    // 获取验证码
    getCode() {
      clearInterval(this.timer);
      this.count = 60;
      this.$ajax
        .post(this.$api.getCode, {
          mobile: this.mobile
        })
        .then(res => {
          this.$message.success(res.msg);
          this.isShowTimer = true;
          this.timer = setInterval(() => {
            this.count--;
            if (this.count === 0) {
              this.isShowTimer = false;
              clearInterval(this.timer);
              this.count = 60;
            }
          }, 1000);
        })
        .catch(err => {
          this.isShowTimer = false;
          this.$message.error(err);
        });
    }
  },
  computed: {
    mobile() {
      return this.$store.state.mobile;
    },
    isPC() {
      return this.$store.state.isPC;
    }
  },
  beforeDestroy() {
    clearInterval(this.timer);
    this.timer = null;
  }
};
</script>

<style scoped lang="less">
.index-wrapper {
  width: 100%;
  height: 100%;
  h1 {
    text-align: center;
    font-size: 1.5rem;
    font-family: MicrosoftYaHei-Bold;
    font-weight: bold;
    color: rgba(68, 68, 68, 1);
  }
}
#pc.index-wrapper {
  .flex_content();
  .flex_column();
  .content {
    overflow: auto;
    background: @backGroundColor;
    padding: 4rem 8rem;
    .flex_content();
    .flex_justify_center();
    .flex_align_center();
    .content-box {
      background: @white;
      padding: 10rem 0rem;
      box-shadow: 0 0 40px rgba(216, 216, 216, 0.8);
      width: 100%;
      .ant-form {
        margin: 0 auto;
        width: 26rem;
      }
    }
    h1 {
      letter-spacing: 0.3rem;
      margin-bottom: 4rem;
    }
  }
}
#mobile.index-wrapper {
  .content {
    flex: 1;
    overflow: auto;
    .content-box {
      margin: 1rem;
      padding: 1rem;
      box-sizing: border-box;
    }
    h1 {
      margin-bottom: 2rem;
      line-height: 1.5;
      vertical-align: top;
      margin-left: 10px;
    }
  }
}
</style>
